<template>
  <div class="signup">
    <div class="welcome">Hello</div>
    <div class="welcome-desc">
      Registration for the March SAT has ended.
      Start preparing for test day.
      From free test prep to a checklist of what to bring on test day,
      College Board provides everything you need to prepare.
    </div>
    <NForm ref="formRef"
           :model="model"
           :show-label="false"
           :rules="rules">
      <NFormItem path="username"
                 :show-label="true"
                 label="">
        <NInput v-model:value="model.username"
                size="large"
                placeholder="Enter your username"
                @keydown.enter="signUp" />
      </NFormItem>
      <NFormItem path="password"
                 label="">
        <NInput v-model:value="model.password"
                type="password"
                size="large"
                show-password-on="click"
                placeholder="Enter your password"
                @keydown.enter="signUp" />
      </NFormItem>
      <NFormItem path="confirmPassword"
                 label=""
                 first>
        <NInput v-model:value="model.confirmPassword"
                type="password"
                :disabled="!model.password"
                size="large"
                show-password-on="click"
                placeholder="Confirm your password"
                @keydown.enter="signUp" />
      </NFormItem>
      <div class="flex flex-col items-end">
        <div class="w-full btn-login">
          <NButton type="primary"
                   :loading="loading"
                   class="!w-full"
                   size="large"
                   style="width: 100%;border-radius:7px;"
                   @click="signUp">
            Create an account
          </NButton>
        </div>
      </div>
    </NForm>
  </div>
</template>

<script setup lang="ts">
import {
  type FormInst,
  type FormItemRule,
  type FormRules,
  type FormValidationError,
  NButton,
  NForm,
  NFormItem,
  NInput,
  useMessage,
  useNotification,
} from "naive-ui";
import { ref, reactive } from "vue";
import { SignUpFromType } from "./types";
const formRef = ref<FormInst | null>(null);
const model = reactive<SignUpFromType>({
  username: "",
  password: "",
  confirmPassword: "",
});
const message = useMessage();
const notification = useNotification();
const loading = ref<boolean>(false);
const rules: FormRules = {
  username: [
    {
      required: true,
      trigger: ["blur"],
      message: "Username cannot be empty",
    },
  ],
  password: [
    {
      required: true,
      trigger: ["blur"],
      message: "Password cannot be empty",
    },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: ["blur"],
      message: "Confirm password cannot be empty",
    },
    {
      validator: (rule: FormItemRule, value: string): boolean => {
        return value === model.password;
      },
      message: "Password is not same!",
      trigger: ["blur", "password-input"],
    },
  ],
};
function signUp(e: Event) {
  if (
    model.username == "admin" &&
    model.password == "123456" &&
    model.confirmPassword == "123456"
  ) {
    // message.success("Login successful");
    notification.success({
      title: "sign up",
      content: "Success",
    });
  } else {
    // message.warning("Username error");
    notification.warning({
      title: "sign up",
      content: "The username already exists or the passwords do not match.",
    });
  }
}
</script>
<style lang="less" scoped>
.welcome {
  text-align: left;
  font-size: 35px;
  font-weight: 700;
}
.welcome-desc {
  text-align: left;
  font-size: 20px;
}
.btn-login {
  margin-top: 50px;
}
</style>